<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 内部样式(style) -->
    <!-- <style type="text/css">
        *{padding: 0;margin: 0;}
        .box{
            width: 100px;
            height: 100px;
            background-color:aquamarine;
        }
    </style> -->

    <!-- 外部样式(link) -->
    <link rel="stylesheet" href="../css/demo.css">
</head>
<body>
    
    <div class="box"></div>


    <!--   html注释  -->

    <!-- 
        JS引入三种方式:
        1. 内部JS
        在页面中创建script标签, 标签内用于书写JS代码(语法)  => 注意: 现阶段script一般习惯放在body中所有元素的最后方 或者 放在body标签的后方(浏览器容错机制)

        JS常见语法:
        1. JS注释  
           a.  对JS代码进行解析说明
           b. 如果想让某些JS代码不执行 => 注释掉(被注释的内容不会执行)

            (1) 单行注释  => 仅注释一行    
                ctrl + /
                // 注释的内容

            (2) 多行注释  => 批量注释一段代码
                alt + shift + a
                /*
                    多行注释
                */

        2. JS三个打印方法:
           (1)  console.log()    在控制台输出一个或多个内容(多个用逗号分隔)
                优点:  向页面输出文本或html结构(字符串)  
                缺点: 输入位置不可控 
           (2)  document.write()  在文档写入一段文本(一段,多段)
                优点:  向页面输出文本或html结构(字符串)  
                缺点: 输入位置不可控 
           (3)  alert()        弹出框(在页面弹出一段内容)
                优点: 方便调试,可以弹出内容  
                缺点: 影响后续代码执行(要点确定)



        说明
            JS方法:   完成某个特定功能的工具

            JS变量: JS中单词都需要有一定的含义
                (1) 官方规定: console(控制台)  document(文档)  
                (2) 用户自定义: var x = 1  

            JS中如果想输入一段文本, 文本需要用引号包裹 (""  '');
                他说:"那女孩靠的太近了";

        报错:
            Uncaught ReferenceError: hello is not defined   =>  hello没有定义


        JS基本数据类型:  
            number string  boolean
            数字    字符串   布尔值
        
            "我有一头小毛驴"    => 文本说明     
            5000               => 数量/统计
            true/false         => 是非 对错        

     -->
     
</body>
<script type="text/javascript">
    // 单行注释

    /* 
        多行注释
    */


    // 将内容输出到控制台  => 优点: 方便代码调试,不影响页面布局
    // console.log(100);
    // console.log("hello");
    // console.log("你好");
    // console.log(true);
    // console.log(false);
    // console.log(10,20);


    // 将内容输出到页面  =>  优点:  向页面输出文本或html结构(字符串)  缺点: 输入位置不可控 
    document.write(100);
    document.write("hello wolrd");
    document.write(true);
    document.write(false);

    // 向页面输出文本或html结构(字符串)
    document.write("<div class='box'></div>");


    // 将内容在页面弹出  => 优点: 方便调试,可以弹出内容  缺点: 影响后续代码执行(要点确定)
    alert("hello world");

</script>
</html>